<template>
  <CollapseItem title="Escalation">
    <template #content>
      <el-form-item>
        <el-select v-model="escalation" filterable clearable allow-create @visible-change="changeVisible">
          <el-option
            v-for="item in escalations"
            :key="item.id"
            :label="item.escalationCode"
            :value="item.id"
          >
            <span style="float: left">{{ item.escalationCode }}</span>
            <span style="float: right">
              {{ item.id }}<el-button type="danger" size="mini" icon="el-icon-delete" circle @click.stop="remove(item.id)" />
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <FormItemInput v-model="bo.escalationCodeVariable" label="Code variable" />
    </template>
  </CollapseItem>
</template>

<script>
import CollapseItem from '../../ui/CollapseItem'
import { next } from '../../../utils/tools'
import { getRoot, findRootElementsByType, getEventDefinition } from '../../../utils'
import FormItemInput from '../../ui/FormItemInput.vue'

const NAME = 'Escalation', ELEMENT_NAME = 'bpmn:' + NAME

export default {
  name: NAME,
  components: {
    FormItemInput,
    CollapseItem
  },
  props: {
    element: {
      type: Object,
      required: true,
      readOnly: true
    },
    moddle: {
      type: Object,
      required: true
    },
    value: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      escalations: [],
      escalation: this.value
    }
  },
  computed: {
    bo() {
      return getEventDefinition(this.element)
    }
  },
  watch: {
    escalation(val) {
      let escalation
      if (val) {
        escalation = this.escalations.find(item => item.id === val)
        if (!escalation) { // 新增下拉选项
          escalation = this.moddle.create(ELEMENT_NAME, { id: next('Escalation'), name: val, escalationCode: val })
          const root = getRoot(this.element)
          escalation.$parent = root
          root.rootElements = (root.rootElements || []).concat([escalation])
          this.escalations.push(escalation)
        }
      }
      this.$emit('save-ref', escalation)
    },
    'bo.escalationCodeVariable'(val) {
      this.$emit('save-escalation', { escalationCodeVariable: val?.length ? val : undefined })
    }
  },
  methods: {
    remove(id) {
      let index = 0, escalationCode
      while (index < this.escalations.length) {
        if (this.escalations[index].id === id) {
          escalationCode = this.escalations[index].escalationCode
          break
        }
        index++
      }
      if (this.escalation === id || this.escalation === escalationCode) {
        this.$emit('save-ref', this.escalation = undefined)
        this.delete(index, id)
        return
      }
      this.delete(index, id)
    },
    delete(index, id) {
      const root = getRoot(this.element)
      root.rootElements = root.rootElements.filter(ele => ele.id !== id) // 移除对应id的Message
      this.escalations.splice(index, 1)
    },
    changeVisible(show) {
      if (show) {
        this.escalations = findRootElementsByType(this.element, ELEMENT_NAME)
      }
    }
  }
}
</script>
